<template>
  <div>
    <main-layout :searchWord="data.key" :flag="data.flag">
      <template #title>
        <i class="iconfont icon-shujuzidian"></i>
        <label class="main-layout-title">字典管理</label>
      </template>
      <template #operation>
        <el-button type="primary" @click="events.showCreateDictionaryType"
          >添加字典类别</el-button
        >
      </template>
      <template #search>
        <el-input
          v-model="data.key"
          style="width: 240px"
          placeholder="名称/键值"
          :prefix-icon="Search"
        />
      </template>
      <template #menu>
        <label style="font-size: 13px">显示：</label>
        <el-button :type="isActives.isActive1" @click="toDictionaryType"
          >字典类别</el-button
        >
      </template>
    </main-layout>
    <div>
      <el-dialog
        v-model="data.showCreateDictionaryType"
        title="添加字典类别"
        width="500"
        :before-close="events.closeCreateDictionaryType"
      >
        <el-form
          ref="createDictionaryTypeFormRef"
          :model="data.createDictionaryType"
          :rules="data.createDictionaryTypeFormRules"
          label-width="60px"
        >
          <el-form-item label="名称" prop="name">
            <el-input
              v-model="data.createDictionaryType.name"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="键值" prop="key">
            <el-input
              v-model="data.createDictionaryType.key"
              placeholder="请输入"
            />
          </el-form-item prop="description">
          <el-form-item label="描述">
            <el-input
              type="textarea"
              v-model="data.createDictionaryType.description"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item>
            <div class="operation-btn">
              <el-button type="primary" @click="events.createDictionaryType"
                >添加</el-button
              >
            </div>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import MainLayout from "@/components/MainLayout.vue";
import { Search } from "@element-plus/icons-vue";
import type { FormRules } from "element-plus";
import { addDictionaryType } from "@/api/dictionaryType";
import { getAdmin } from "@/tools/cookieMgr";
import { toast } from "@/tools/tools";

interface Data {
  key: string;
  flag: boolean;
  outerVisible: boolean;
  createDictionaryType: any;
  showCreateDictionaryType: boolean;
  createDictionaryTypeFormRules:FormRules;
}

const data = reactive<Data>({
  key: "",
  flag: false,
  outerVisible: false,
  createDictionaryType: {},
  showCreateDictionaryType: false,
  createDictionaryTypeFormRules:{
    name:[{ required: true, message: "请输入名称"}],
    key:[{ required: true, message: "请输入键值" }],
  },
});

const createDictionaryTypeFormRef = ref<any>();


const events = {
  showCreateDictionaryType: () => {
    data.showCreateDictionaryType = true;
  },
  closeCreateDictionaryType: () => {
    data.showCreateDictionaryType = false;
  },
  createDictionaryType:async () => {
    createDictionaryTypeFormRef.value?.validate(async(valid: boolean) => {
      if (valid) {
        const res=await addDictionaryType({...data.createDictionaryType,auth:JSON.parse(getAdmin()||"{}").id});
        if(res.code>=0){
          data.showCreateDictionaryType = false;
          data.createDictionaryType = {};
          toast.success(res.message||"添加成功");
          data.flag=!data.flag;
        }else{
          toast.error(res.message||"添加成功");
        }
      } else {
        console.log("error submit!!");
        return false;
      }
    });
  },
  
};

const isActives = reactive({
  isActive1: "",
  isActive2: "",
});

const router = useRouter();
const route = useRoute();

//字典类别
const toDictionaryType = () => {
  isActives.isActive1 = "primary";
  isActives.isActive2 = "";
  router.push("/Dictionary/DictionaryType");
};


const init = () => {
  if (
    route.path
      .toLowerCase()
      .startsWith("/Dictionary/DictionaryType".toLowerCase())
  ) {
    isActives.isActive1 = "primary";
    isActives.isActive2 = "";
  } else if (
    route.path.toLowerCase().startsWith("/Dictionary/Dictionary".toLowerCase())
  ) {
    isActives.isActive1 = "";
    isActives.isActive2 = "primary";
  }
};
// 初始加载
onMounted(() => {
  init();
});
</script>

<style scoped>
.main-layout-title {
  font-size: 22px;
  margin: 24px 12px 12px 12px;
}
.operation-btn {
  width: 100%;
  text-align: right;
}
</style>
